<template>
  <SplitPanel p-5>
    <template #left-content>
      <div class="titleBox">
        <div class="title">耗材库</div>
        <div class="btn">批量导入</div>
      </div>

      <div class="mySearch">
        <a-input-search
          v-model:value="value"
          placeholder="输入名称搜索"
          enter-button="搜索"
          @search="onSearch"
        />
      </div>
      <a-directory-tree
        v-model:expandedKeys="expandedKeys"
        v-model:selectedKeys="selectedKeys"
        multiple
        :tree-data="treeData"
      ></a-directory-tree>
    </template>
    <template #right-content>
      <DynamicTable
        bordered
        :data-request="loadData"
        :columns="columns"
        row-key="id"
        @resize-column="handleResizeColumn"
        :scroll="{
          y: 'calc(100vh - 360px)',
        }"
      >
        <template #expandedRowRender>
          <a-table :columns="innerColumns" :data-source="innerData" :pagination="false"> </a-table>
        </template>
        <template #toolbar>
          <a-button type="primary" @click="openUserModal({})"> 新增耗材 </a-button>
          <a-button @click="openUserModal({})"> 批量导入耗材 </a-button>
          <a-button @click="openUserModal({})"> 导入模板下载 </a-button>
        </template>
      </DynamicTable>
    </template>
  </SplitPanel>
</template>
<script setup lang="ts">
  import { Modal, message } from 'ant-design-vue';
  import { baseColumns, innerColumns, type TableListItem } from './columns';
  import type { TreeProps } from 'ant-design-vue';
  import { ref } from 'vue';
  import {
    useTable,
    type OnChangeCallbackParams,
    type TableColumn,
  } from '@/components/core/dynamic-table';
  import { useFormModal } from '@/hooks/useModal/index';
  const value = ref<string>('');
  const onSearch = (searchValue: string) => {
    console.log('use value', searchValue);
    console.log('or use this.value', value.value);
  };
  const [showModal] = useFormModal();
  const innerData = [
    {
      id: '1',
      userName: 'PC202402021412',
      userLogin: '2026-01-01',
      deptName: '120瓶',
      roleName: '¥148',
    },
  ];
  const [DynamicTable, dynamicTableInstance] = useTable();
  const columns: TableColumn[] = [
    ...baseColumns,
    {
      title: '操作',
      align: 'left',
      width: 100,
      dataIndex: 'ACTION',
      actions: ({ record }) => [
        {
          label: '详情',
          onClick: () => openUserModal(record),
        },
      ],
    },
  ];

  const loadData = async (
    params,
    onChangeParams: OnChangeCallbackParams,
  ): Promise<API.TableListResult> => {
    const data = {
      current: 1,
      orders: [],
      pages: 1,
      records: [
        {
          id: '1',
          userName: '2024011011451',
          userLogin: '氢氧化钾 (KOH)',
          deptName: '0',
          roleName: '最低库存：6瓶',
          roleType: '3年',
        },
        {
          id: '2',
          userName: '2024011011451',
          userLogin: '氢氧化钾 (KOH)',
          deptName: '126瓶',
          roleName: '最低库存：6瓶',
          roleType: '3年',
        },
        {
          id: '3',
          userName: '2024011011451',
          userLogin: '氢氧化钾 (KOH)',
          deptName: '126瓶',
          roleName: '最低库存：6瓶',
          roleType: '3年',
        },
        {
          id: '4',
          userName: '2024011011451',
          userLogin: '氢氧化钾 (KOH)',
          deptName: '126瓶',
          roleName: '最低库存：6瓶',
          roleType: '3年',
        },
      ],
      searchCount: true,
      size: 10,
      total: 4,
    };

    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          list: data,
          ...params,
        });
      }, 500);
    });
  };

  const handleResizeColumn = (w, col) => {
    col.width = w;
  };

  // 企业状态开关变化   1.启用  2.禁用
  const onDisable = async (row: any) => {};

  /**
   * @description 打开用户弹窗
   */
  const openUserModal = async (record: Partial<TableListItem> = {}) => {};

  /**
   * @description 删除用户
   */
  const deleteUser = (record: Partial<TableListItem> = {}) => {};

  /**
   * @description 重置密码
   */
  const openResetPwdModal = async (record: Partial<TableListItem> = {}) => {};

  const expandedKeys = ref<string[]>(['0']);
  const selectedKeys = ref<string[]>(['0']);
  const treeData: TreeProps['treeData'] = [
    {
      title: '耗材库（总）',
      key: '0',
      children: [
        {
          title: '酸类试剂',
          key: '1',
          isLeaf: true,
        },
        {
          title: '碱类试剂',
          key: '2',
          isLeaf: true,
        },
        {
          title: '氧化剂与还原剂',
          key: '3',
          isLeaf: true,
        },
      ],
    },
  ];
</script>
<style scoped lang="less">
  .mySearch {
    padding: 20px 20px 20px 10px;
  }
  .titleBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px 0 10px;

    .title {
      font-size: 16px;
    }
    .btn {
      font-size: 12px;
    }
  }
</style>
